<template>
	<view>
		<div class="top">
			<div class="xxxg">
				<uni-card class="xxxg-card" title=""  >
				<view class="example">
							<!-- 基础用法，不包含校验规则 -->
							<uni-forms ref="baseForm" :modelValue="baseFormData">
								
								<div class="sjhxg-sjh">
								<div class="sjh-tb">
									<image src="/static/wdimg/sj@2x (1).png" mode="widthFix"></image>
								</div>
								<div class="sjh-srk">
								<uni-forms-item  >
									<uni-easyinput   :inputBorder="false"   v-model="baseFormData.phone" placeholder="请输入手机号" />
								</uni-forms-item>
								</div>
								</div>
								
								<div class="sjhxg-yzm">
								<div class="sjhxg-yzm-left">
								<div class="yzm-tb">
									<image src="/static/wdimg/dg@2x (2).png" mode="widthFix"></image>
								</div>
								<div class="yzm-srk">
								<uni-forms-item  >
									<uni-easyinput :inputBorder="false"  v-model="baseFormData.yzm" placeholder="输入验证码" />
								</uni-forms-item>
								</div>
								</div>
								<div class="sjhxg-yzm-right">
									<button class="sjhxg-yzm-right-but">获取验证码</button>
								</div>
								</div>
							</uni-forms>
							
							<div class="tj-button"><button @click="tomy" class="tj-button-but">提交</button></div>
						</view>
			
				</uni-card>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		baseFormData: {
						phone: '',
						yzm: '',
					},
			}
		},
		methods: {
			tomy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			}
		}
	}
</script>

<style>
.top{
	width: 750rpx;
	height: 400rpx;
	background-color: #3183FC;
		/* 	overflow: hidden; */
	/* 	background-image: url(@/static/wdimg/aaa.jpg); */
	position: relative;
}

.xxxg{
	position: absolute;
	width: 750rpx;
	
}


	.xxxg-card{
		height: 600rpx;
	/* 	width: 750rpx; */
		border-radius: 25rpx;
	}
	

	
	.sjhxg-sjh{
		width: 100%;
		/* background-color: #F2F2F2; */
		border: 1px solid black;
		padding: 0 10rpx;
		border-radius: 100rpx;
		height: 100rpx;
		display: flex;
	/* 	justify-content: space-around; */
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.sjh-srk{
	/* 	background-color: red; */
		height: 70rpx;
		width: 480rpx;
	}
	
	.sjh-tb{
	/* 	background-color: red; */
		height: 70rpx;
		width: 18%;
		display: flex;
		justify-content: center;
	}
	.sjh-tb image{
		width: 50rpx;
	}
	
	.sjhxg-yzm{
		display: flex;
	/* 	background-color: red; */
		align-items: center;
		justify-content: space-between;
	}
	
	
	.sjhxg-yzm-left{
		width: 68%;
		/* background-color: #F2F2F2; */
		border: 1px solid black;
		border-radius: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
/* 		justify-content: space-around; */
	}
	
	.yzm-tb{
		/* background-color: yellow; */
		height: 79rpx;
		width: 32%;
		display: flex;
		align-content: inherit;
		justify-content: center;
	}
	
	.yzm-tb image{
		width: 55rpx;
	}
	
	.yzm-srk{
		/* background-color: yellow; */
		height: 79rpx;
		width: 258rpx;
	}
	
	.sjhxg-yzm-right{
		height: 70rpx;
			width: 30%;
/* 		background-color: blue; */
	}
	
	.sjhxg-yzm-right-but{
		width: 100%;
		font-size: 25rpx;
		color: white;background-color: #2A7CF7;
		border-radius: 100rpx;
		
	}
	
	.tj-button{
		margin-top: 80rpx;
/* 		margin-bottom: 80rpx; */
	}
	
	.tj-button-but{
		color: white;
		width: 600rpx;
		border-radius: 100rpx;
		background-color: #0662E6;
		height: 90rpx;
		
	}
	
</style>
